{% extends "base.html" %}
    {% block content %}

<!-- display: flex; flex-direction: column; height: 100vh; -->
<div class="container mt-5">
    <div id="d-flex">
            <div id="chatBox" class="p-3 mb-3 w-100">
                {% for chat in chats %}
                    <div class="text-center yekan" id="question">
                        <div class="d-inline-block text-white rounded-3">
                            {{ chat.question }}
                        </div>
                    </div>
                    <div class="text-center box yekan w-50" id="answer">
                        <div class="d-inline-block rounded-3 border yekan text-corrector">
                            {{ chat.answer|safe }}
                        </div>
                    </div>
                {% endfor %}
            </div>
    </div>
    <form id="chatForm" class="mb-4">
        <div class="input-group sendbox bg-secondary rounded-4 border-1 border-light">
            <input type="text"class="form-control mt-3 mb-3 col-9 col-sm-10 me-4 yekan"  id="msgbox" placeholder="سوالت رو بپرس..." required>
            <button type="submit" id="send" class="col-2 col-sm-1 ms-1"><i class="bi bi-send"></i></button>
        </div>
    </form>
</div>
{% endblock %}